<template>
  <div style="height: 94%">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="流程卡号" label-width="72px">
          <el-input placeholder="请输入" prefix-icon="el-icon-search" v-model="cardcode" size="mini" clearable @change="() => {
        initData();
      }
        ">
          </el-input>
        </el-form-item>
        <el-form-item label="客户" prop="dateList">
          <el-select v-model="clientName" placeholder="请选择" size="mini" @change="initData" clearable>
            <el-option v-for="item in clientNameList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优化包" prop="plate">
          <el-select v-model="spareFieldStr5" placeholder="请选择" size="mini" @change="initData" clearable>
            <el-option v-for="item in batchList" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交货日期" prop="dateList">
          <el-date-picker size="mini" v-model="dateList" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="initData">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableRwdList" height="100%" :default-sort="{ prop: 'date', order: 'descending' }"
      :row-class-name="tableRowClassName2" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="最大宽度:">
              <span>{{ props.row.maxwidth }}mm</span>
            </el-form-item>
            <el-form-item label="最大高度:">
              <span>{{ props.row.maxheight }}mm</span>
            </el-form-item>

            <el-form-item label="厚度:">
              <span>{{ props.row.thick }}mm</span>
            </el-form-item>
            <el-form-item label="片标记:">
              <span>{{ props.row.tag }}</span>
            </el-form-item>
            <el-form-item label="出片规则:">
              <span>{{ props.row.outrule }}</span>
            </el-form-item>
            <el-form-item label="进笼时间:">
              <span>{{
        props.row.updateTime != null ? props.row.updateTime : ""
      }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="流程卡任务号" align="center" key="rwdidno" prop="rwdidno" width="120">
        <template slot-scope="scope">
          <div class="rwdidno_text" @click="handlerOpenDialog(scope.row, 1)">
            {{ scope.row.rwdidno }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="流程卡号" align="center" key="cardcode" prop="cardcode" />
      <el-table-column label="优化包批次" align="center" key="spareFieldStr5" fit width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          {{
        scope.row.optGlasses.length > 0
          ? scope.row.optGlasses[0].spareFieldStr5
          : "" }}
        </template>
      </el-table-column>
      <el-table-column label="交货日期" align="center" key="spareFieldStr7" show-overflow-tooltip min-width="150" sortable
        prop="spareFieldStr7">
        <template slot-scope="scope">
          {{ scope.row.spareFieldStr7.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column label="客户" align="center" key="clientName" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          {{
        scope.row.optGlasses.length > 0
          ? scope.row.optGlasses[0].clientName
          : ""
      }}
        </template>
      </el-table-column>
      <el-table-column label="成品名称" align="center" key="spareFieldStr6" show-overflow-tooltip min-width="180">
        <template slot-scope="scope">
          {{
          scope.row.optGlasses.length > 0
            ? scope.row.optGlasses[0].spareFieldStr6
            : ""
        }}
        </template>
      </el-table-column>
      <el-table-column label="订单数" align="center" key="quantity" prop="quantity" wid fit show-overflow-tooltip />
      <el-table-column label="可配对数" align="center" key="pairedquantity" prop="pairedquantity" fit
        show-overflow-tooltip />
      <el-table-column label="已生产数量" align="center" key="deliveredquantity" prop="deliveredquantity" fit
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="所在笼格" align="center" key="onlineCage" prop="onlineCage" />
      <el-table-column label="片标记" align="center" key="tag" prop="tag" fit />=
      <el-table-column label="进笼时间" align="center" key="updateTime" prop="updateTime" width="120" sortable>
        <template slot-scope="scope">
          <div>
            {{
          scope.row.updateTime != null ? scope.row.updateTime.slice(5) : ""
        }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="tips">
      颜色说明:
      <div :style="{
          backgroundColor: 'rgba(255, 255, 0, 0.5)',
          width: '10px',
          height: '10px',
        }"></div>
      表示流程卡内存在离线生产的玻璃
    </div>
    <el-dialog :title="selectRwdId + '流程卡在线玻璃'" :visible.sync="dialogOpen" width="70%">
      <carcode :lineExitData="lineExitData" :loadingDialogTable="loadingDialogTable" :isLocation="isLocation" />
    </el-dialog>
  </div>
</template>

<script>
import { getRwdInfo } from "@/api/assembly/fontCage";
import { isTimeInRange } from "@/utils/tykj";
import { getRwdGlass } from "@/api/assembly/behindCage.js";
import carcode from "@/views/components/production/carcode.vue";
export default {
  components: {
    carcode,
  },
  data() {
    return {
      initData: "",
      cardcode: "",
      isLocation: 3,
      dateList: [],
      tableCheck: 0,
      options2: [
        {
          label: "等待",
          value: 0,
        },
        {
          label: "出片",
          value: 1,
        },
        {
          label: "强制出片",
          value: 2,
        },
        {
          label: "配片",
          value: 3,
        },
      ],
      clientName: "",
      value: "",
      rwdData: [],
      dateList: [],
      selectRwdId: "",
      lineExitData: [],
      spareFieldStr5: '',
      dialogOpen: false,
      loadingDialogTable: false,
    };
  },
  computed: {
    tableRwdList() {
      return this.rwdData
        .filter(
          (item) => item.custom == "" || item.custom.includes(this.clientName)
        )
        .filter((item) => item.cardcode.includes(this.cardcode))
        .filter((item) => item.optGlasses[0].spareFieldStr5.includes(this.spareFieldStr5))
        .filter((item) => {
          if (this.dateList == null || this.dateList.length == 0) return true;
          let jhDate =
            item.optGlasses.length > 0 ? item.optGlasses[0].spareFieldStr7 : "";
          if (!jhDate) return;
          return (
            this.dateList.length != 0 &&
            isTimeInRange(jhDate.replace(".0", ""), this.dateList)
          );
        });
    },
    clientNameList() {
      let arr = [];
      let arr2 = [];
      this.tableRwdList.forEach((item) => {
        arr.includes(item.custom) ? "" : arr.push(item.custom);
      });
      this.rwdidNoList &&
        this.rwdidNoList.forEach((item) => {
          arr2.includes(item.custom) ? "" : arr2.push(item.custom);
        });
      return this.tableCheck == 0 ? arr : arr2;
    },
    batchList() {
      let arr = [];
      this.rwdData.forEach((item) => {
        let isUrgent =
          item.optGlasses[0].urgent <= 2 ? 1 : 0;

        if (!arr.some((a) => a.name == item.optGlasses[0].spareFieldStr5)) {
          arr.push({
            name: item.optGlasses[0].spareFieldStr5,
            urgent: item.optGlasses[0].urgent,
            num: isUrgent,
          });
        } else {
          arr.forEach((a, index) => {
            if (a.name == item.optGlasses[0].spareFieldStr5) {
              arr[index].num += isUrgent;
            }
          });
        }
      });
      arr.sort((a, b) => b.num - a.num)
      return arr;
    },
  },
  methods: {
    tableRowClassName2({ row, rowIndex }) {
      if (row.optGlasses.some((a) => a.downState == "下架")) {
        return "downState2";
      }
    },

    handlerOpenDialog(e) {
      this.selectRwdId = e.rwdidno + "(" + e.cardcode + ")";
      this.dialogOpen = true;
      this.loadingDialogTable = true;
      let params = {
        id: e.id,
        rwdidno: e.rwdidno,
      };
      getRwdGlass(params).then((res) => {
        this.lineExitData = res.data;
        this.loadingDialogTable = false;
      });
    },
    getRwdInfoData() {
      getRwdInfo().then((res) => {
        this.rwdData = res.data.map((item) => {
          return Object.assign(item, {
            spareFieldStr7:
              item.optGlasses.length > 0 && item.optGlasses[0].spareFieldStr7
                ? item.optGlasses[0].spareFieldStr7
                : "1970-01-01 00:00:00",
          });
        });
      });
    },
  },
  mounted() {
    this.getRwdInfoData();
  },
};
</script>

<style lang="less" scoped>
.tips {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.demo-table-expand {
  font-size: 0;
}

/deep/ .demo-table-expand .el-form-item__label {
  padding-right: 5px;
  color: #696b6f;
}

.demo-table-expand .el-form-item {
  margin-left: 60px;
  margin-bottom: 0;
  width: 25%;
}

/deep/ .el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 320px;
}

.el-table td.el-table__cell div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-table {
  .warning-row {
    background: oldlace;
  }

  .success-row {
    background: #f0f9eb;
  }

  .danger-row {
    background: #fef0f0;
  }

  .downState {
    background: rgba(255, 255, 0, 0.4);
  }

  .downState2 {
    background: rgba(255, 255, 0, 0.2);
  }

  .cell {
    padding: 0 !important;
    font-size: 14px;
  }
}

/deep/ .el-table__cell {
  padding: 5px 0;
}

/deep/ .el-dialog__body {
  padding: 10px 20px !important;
}

.rwdidno_text {
  color: #1890ff;
}

.rwdidno_text:hover {
  text-decoration: underline;
  color: #1890ff;
  cursor: pointer;
}
</style>
